<template>
	<view class="store_info_sy">
		<view class="store_top_info" :style="storeInfo.store_face_image!=''?'background:url('+storeInfo.store_face_image+')':''">
			<view class="store_top_block">
				<view class="apptop"></view>
				<view class="lr_btn">
					<view class="left_back" @click="$nav('',3)"><uni-icons type="arrowleft" color="#fff" size="22"></uni-icons></view>
					<view class="right_back">
						<text :class="isFav?'follow':'follow ck'" @click="favClick">{{isFav?'已':'+ '}}关注</text>
						<text @click="share" class="qwicon qwfenxiang"></text>
					</view>
				</view>
			
				<view class="store_info_item">
					<view class="store_logo"><image :src="storeInfo.store_logo||''" mode=""></image></view>
					<view class="store_right_info">
						<view class="title">{{storeInfo.store_name||''}}<uni-icons style="margin-left: 15rpx;" type="arrowright" color="#fff" size="14"></uni-icons></view>
						<view class="star">
							<sx-rate :disabled="true" :value="rate" container-class="my-rate-box" rate-class="my-rate" />
							<text class="star_text f">评分 {{rate}} </text>
							<text class="star_text">已有 {{storeInfo.fav||0}} 人关注</text>
						</view>
					</view>
				</view>
				
				<view class="check-tab">
					<text :class="topIndex==0?'item ck':'item'" @click="topClick(0)">商品展示</text>
					<text :class="topIndex==1?'item ck':'item'" @click="topClick(1)">店铺信息</text>
					<text :class="topIndex==2?'item ck':'item'" @click="topClick(2)">售后服务</text>
				</view>
			</view>

		</view>
		
		<!-- 主体内容开始 -->
		<view class="store_info_sy_main" v-show="topIndex==0">
			<view class="category_left">
				<scroll-view scroll-y="true" class="scroll-Y">
					<view :class="navIndex==-1?'item ck':'item'" @click="navClick()">全部</view>
					<view v-for="(v,k) in classList" :key="k" :class="navIndex==k?'item ck':'item'" @click="navClick(k,true)">{{v}}</view>
				</scroll-view>
			</view>
			
			<view class="category_right">
				<mescroll-body ref="mescrollRef" @up="upCallback" @down="downCallback" :up="{noMoreSize:8}">
					<scroll-view scroll-y="true" class="scroll-Y">
						<view class="list">
							<uni-grid :column="2" :show-border="false"  :square="false" :highlight="false">
								<uni-grid-item class="grid_item" v-for="(v,k) in list" :key="k">
									<view class="item" @click="$nav('/pages/goods/info?id='+v.id)">
										<image :src="v.goods_master_image||''" mode="aspectFill"></image>
										<view  class="goods_name">{{v.goods_name||''}}</view>
										<view class="price">
											<text class="goods_price">￥{{v.goods_price||0.00}}</text>
											<text class="market_price">销量：{{v.goods_sale}}</text>
										</view>
										
									</view>
								</uni-grid-item>
								
							</uni-grid>
						</view>
					</scroll-view>
				</mescroll-body>
			</view>
		</view>
		
		<!-- 主体内容开始2 -->
		<view class="store_info_sy_main change" v-show="topIndex==1">
			<view class="store_more_info">
				<view class="item">
					<view class="title">公司名称：</view>
					<view class="content">{{storeInfo.store_company_name||'-'}}</view>
				</view>
				<view class="item">
					<view class="title">公司联系：</view>
					<view class="content">{{storeInfo.store_mobile||'-'}}</view>
				</view>
				<view class="item">
					<view class="title">公司地址：</view>
					<view class="content">{{storeInfo.area_info+' '+storeInfo.store_address}}</view>
				</view>
			</view>
		</view>
		
		<!-- 主体内容开始3 -->
		<view class="store_info_sy_main change" v-show="topIndex==2">
			<view class="store_more_info">
				<view class="item" v-html="storeInfo.after_sale_service"></view>
			</view>
		</view>
		
		<uni-popup ref="popup" type="share">
		    <uni-popup-share title="分享到" @select="select"></uni-popup-share>
		</uni-popup>
	</view>
</template>

<script>
	import SxRate from '@/components/sx-rate';
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import uniPopupShare from "@/components/uni-popup/uni-popup-share.vue"
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			SxRate,uniPopupShare
		},
		data() {
			return {
				params:{
					page:1,
					per_page:10,
				},
				id:0,
				storeInfo:{},
				classList:[],
				classIdList:[],
				list:[],
				topIndex:0,
				navIndex:-1,
				rate:5,
				isFav:false,
			};
		},
		onLoad(opt) {
			this.id = opt.id
			this.params.store_id= opt.id
			this.get_store_info();
			this.is_fav();
		},
		methods:{
			
			get_store_info(){
				let obj = {...this.$api.stores}
				obj.url += '/'+this.id
				this.$http(obj).then(res=>{
					this.storeInfo = res.data;
					this.rate = this.storeInfo.rate.scoreAll;
					this.classList = this.storeInfo.store_classes
					this.classIdList = this.storeInfo.store_classes_id
				})
			},
			is_fav(){
				let obj = {...this.$api.favs}
				obj.url += '/'+this.id+'?is_type=1'
				this.$http(obj).then(res=>{
					if(res.code==200){
						this.isFav = true
					}else{
						this.isFav = false
					}
				})
			},
			favClick(){
				let obj = {...this.$api.favs}
				obj.method = 'post';
				this.$http(obj,{id:this.id,is_type:1}).then(res=>{
					this.$toast(res.msg)
					this.is_fav();
				})
			},
			topClick(e){
				this.topIndex = e;
			},
			navClick(k=-1,status=false){
				if(!status){
					this.params.class_id = 0;
				}else{
					this.params.class_id=this.classIdList[k];
				}
				this.navIndex = k
				this.mescroll.resetUpScroll();
			},
			share(){
				this.$refs.popup.open()
			},
			select(e){
				let type = 'WXSceneSession';
				if(e.index=0){
					type = 'WXSceneSession'
				}
				if(e.index=1){
					type = 'WXSenceTimeline'
				}
				if(e.index=2){
					type = 'WXSceneFavorite'
				}
				uni.share({
				    provider: "weixin",
				    scene: type,
				    type: 0,
					title:this.storeInfo.store_name||'店铺',
					imageUrl:this.storeInfo.store_logo||'',
				    summary: "欢迎您来"+this.storeInfo.store_name+"购物喔！",
				    success: function (res) {
						this.$toast('分享成功');
				        console.log("success:" + JSON.stringify(res));
				    },
				    fail: function (err) {
				        console.log("fail:" + JSON.stringify(err));
				    }
				});
				// console.log(e,e.index)
			},
			upCallback(page){
				this.params.page = page.num; // 页码, 默认从1开始
				this.params.per_page = page.size; // 页长, 默认每页10条
				
				let baseObj = JSON.stringify(this.params);
				var b = new Buffer(baseObj);
				var basecode = b.toString('base64');
				this.params.params = basecode;
				
				this.$http(this.$api.goodsSearch,this.params).then(res=>{
					if(res.code == 200){
						if(this.params.page == 1){
							this.list = [];
						}
						this.list = this.list.concat(res.data.data||res.data); //追加新数据
						this.mescroll.endBySize(this.params.per_page, res.data.total); 
						if(res.data.total<8){
							this.mescroll.endUpScroll(false)
						}
						if(res.data.total==0){
							this.mescroll.showEmpty();
						}
					}
				})
			},
			downCallback(){
				this.mescroll.resetUpScroll();
			}
		}
	}
</script>

<style lang="scss">
.store_info_sy{
	.store_info_sy_main{
		
		height: 100%;font-size: $uni-font-size-base;display: flex;
		.store_more_info{
			margin:30rpx;
			height: 100%;
			.item{
				margin-bottom: 40rpx;
				.title{
					font-size:$uni-font-size-lg;
				}
				.content{
					margin-top: 20rpx;
					font-size: $uni-font-size-sm;
					color:#666;
				}
			}
		}
		&.change{background: #fff;}
		
	}
	.category_left{
		flex: 0 0 180rpx;
		border-radius:0 10rpx 10rpx 0;
		line-height: 120rpx;
		height: 120rpx;
		height: 100%;
		width: 180rpx;
		background: #fff;
		.item{
			padding-left: 30rpx;
			height: 120rpx;
			
			overflow: hidden;
			// border-left: 8rpx solid #f8f8f8;
			&.ck{
				border-left: 8rpx solid $uni-color-error;
				background: #f8f8f8;
				color:$uni-color-error;
			}
		}
		
	}
	.category_right{
		flex: 1;
		margin:20rpx 20rpx;
		.list{
			.grid_item:nth-child(2n){
				.item{
					margin-right: 0;
					margin-left: 10rpx;
				}
			}
			.item{
				margin-right: 5rpx;
				margin-bottom: 10rpx;
				border-radius: 6rpx;
				background: #fff;
				box-sizing: border-box;
				padding: 20rpx;
				image{width: 100%;background: #eee;border-radius: 6rpx;height: 220rpx;box-sizing: border-box;}
				.comment{color:#999;font-size: $uni-font-size-sm;line-height: 60rpx;padding-left: 5rpx;}
				.price{
					overflow: hidden;
					.goods_price{color:$uni-color-error;margin-right: 20rpx;font-size: $uni-font-size-sm;}
					.market_price{color:#ccc;font-size: $uni-font-size-sm;}
				}
				.goods_name{line-height: 60rpx;text-align: left;font-size: $uni-font-size-sm;width: 100%;overflow: hidden; white-space: nowrap;text-overflow:ellipsis; }
			}
		}
	}
	.store_top_info{
		position: relative;
		// background: url('../../static/store/store_face.jpg');
		min-height: calc(var(--status-bar-height) + 400rpx);
		background-position: top center;background-size: 100%;
		.check-tab{
			color:#fff;
			font-size: $uni-font-size-base;
			margin-left: 40rpx;
			margin-right: 40rpx;
			margin-top: 60rpx;
			line-height: 60rpx;
			height: 60rpx;
			display: flex;
			.item{
				text-align: center;
				color:#ccc;
				margin: 0 38rpx;
				
				flex: 1;
				&.ck{
					color:#fff;
					border-bottom: 2px solid #fff;
				}
			}
		
		}
		.store_info_item{
			padding-top: 60rpx;
			.store_logo{
				background: #eee;
				margin-left: 40rpx;
				float: left;
				width: 110rpx;
				height: 110rpx;
				border-radius: 8rpx;
				margin-right: 30rpx;
				image{
					border-radius: 8rpx;
					width: 110rpx;
					height: 110rpx;
				}
			}
			.store_right_info{
				color:#fff;
				float: left;
				max-width: 480rpx;
				.title{margin-top: 10rpx;}
				.star{
					margin-top: 15rpx;
					.star_text{
						float: left;
						font-size: $uni-font-size-sm;
						&.f{margin-right: 20rpx;}
					}
					.my-rate-box{
						float: left;
						font-size: 26rpx;
						margin-right: 20rpx;
					}
					&:after{
						clear: both;
						display: block;
						content:'';
					}
				}
				
			}
			&:after{
				clear: both;
				display: block;
				content:'';
			}
		}
		.store_top_block{
			background: rgba(#000,0.6);
			position: absolute;
			min-height: calc(var(--status-bar-height) + 400rpx);
			width: 100%;
			.lr_btn{
				margin-top: 30rpx;padding: 0 40rpx; 
				.left_back{float:left;}
				.right_back{
					float: right;
					.follow{
						background: #999;
						color:#fff;
						padding: 5rpx 25rpx;
						border-radius: 20rpx;
						font-size: $uni-font-size-base;
						margin-right: 30rpx;
						&.ck{background-color: $uni-color-error;}
					}
					.qwfenxiang{color:#fff;font-size: 38rpx;}
				}
				&:after{content:'';display: block;clear: both;}
			}
			
			.apptop{height: var(--status-bar-height);}
		}
		
	}
}
</style>
